<div class="container">
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title" v-if="pageTitle" v-cloak>{{ pageTitle }}</div>
      </div>
      <div class="panel-body">
        <div class="form-group">
          <input autofocus type="text" class="form-control" id='name' name='name' placeholder="路由名" v-model="name">
        </div>

        <div class="form-group">
          <input autofocus type="text" class="form-control" id='title' name='title' placeholder="标题" v-model="title">
        </div>

        <div class='markdown_editor in_editor'>
          <div class='markdown_in_editor'>
            <textarea class='form-control editor' name='t_content' rows='20' placeholder='支持 Markdown 语法'></textarea>
          </div>
        </div>
        <div class="form-group">
          <label for="checkbox">html编辑模式</label>
          <input type="checkbox" id="checkbox" v-model="isHtml">
        </div>
        <div class="form-group">
          <label for="checkbox">对照显示模式</label>
          <input type="checkbox" id="checkbox" v-model="isContrast">
        </div>
        <button class='btn btn-primary' v-on:click="onSave()">保存</button>
        <% if(typeof(csrf) !== 'undefined') {%>
        <input type='hidden' name='_csrf' value='<%= csrf %>'>
        <% } %>
      </div>
    </div>
  </div>
</div>

<!-- markdown editor -->
<%- partial('../includes/editor') %>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';

  var editor = new Editor();
  editor.render($('.editor')[0]);

  var staticId = '<%= staticId %>';

  var vue = new Vue({
    el: '#app',
    data: {
      name: '',
      title: '',
      content: '',
      isHtml: false,
      isContrast: false,
      errorMsg: '',
      successMsg: '',
    },
    methods: {
      fetchData: function() {
        $.post(dataPrefix + '/static/' + staticId + '/data',
          {
            appId: appId
          },
          function(result) {
            if (result.err) {
              vue.errorMsg = result.err;
            } else {
              vue.name = result.data.name;
              vue.title = result.data.title;
              editor.codemirror.setValue(result.data.content || '');
              vue.isHtml = result.data.isHtml;
              vue.isContrast = result.data.isContrast;
            }
          });
      },
      onSave: function(status) {
        vue.errorMsg = '';

        if (vue.name === '') {
          vue.errorMsg = '路由名不能为空';
          return;
        }

        if (vue.title === '') {
          vue.errorMsg = '标题为空';
          return;
        }

        if (editor.codemirror.getValue() === '') {
          vue.errorMsg = '内容为空'
          return
        }

        $.post(dataPrefix + '/static/' + staticId + '/update',
          {
            appId: appId,
            _csrf: $('#_csrf').val(),
            name: vue.name,
            title: vue.title,
            content: editor.codemirror.getValue(),
            isHtml: vue.isHtml,
            isContrast: vue.isContrast
          },
          function (result) {
            if (result.err) {
              vue.errorMsg = result.err;
            } else {
              location.href = result.url;
            }
        });
      }
    }
  });

  vue.fetchData();
</script>
